<!-- 添加供应商注册信息 -->
<template>
  <a-drawer
    :title="title"
    width="520"
    :bodyStyle="{ padding: '0' }"
    :visible="drawerVisible"
    :maskClosable="false"
    @close="onDrawerClose">
    <div class="header-box">
      <span>供应商企业信息越完善，评估准确度越高</span>
    </div>
    <div class="detail-form-container">
      <a-form-model
        ref="formRef"
        :model="formData"
        :rules="formRules"
        layout="vertical">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="供应商全称" prop="supplierFullName">
              <a-input v-model="formData.supplierFullName" placeholder="请输入供应商全称" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="统一社会信用代码" prop="uscCode">
              <a-input v-model="formData.uscCode" placeholder="请输入统一社会信用代码" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="法定代表人" prop="legalRepresentative">
              <a-input v-model="formData.legalRepresentative" placeholder="请输入法定代表人" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="联系电话" prop="phone">
              <a-input v-model="formData.phone" placeholder="请输入联系电话" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="联系地区" prop="contactArea">
              <a-cascader v-model="formData.contactArea"  :options="contactAreaOptions" placeholder="请选择联系地区" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="地址" prop="address">
              <a-input v-model="formData.address" placeholder="请输入地址" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-model-item label="经营范围" prop="businessScope">
              <a-input v-model="formData.businessScope" placeholder="请输入经营范围" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="开户行" prop="depositBank">
              <a-input v-model="formData.depositBank" placeholder="请输入开户行" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="收款账号" prop="receivablesAccount">
              <a-input v-model="formData.receivablesAccount" placeholder="请输入收款账号" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-model-item label="收款人" prop="receivablesPerson">
              <a-input v-model="formData.receivablesPerson" placeholder="请输入收款人" />
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="工商营业执照(三合一)" prop="businessLicense">
              <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="fileList.length < 8">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <a-button type="primary" @click="onSave">提交评估</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="onDraft">保存草稿</a-button>
      </slot>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'SupplierRegisterInfo',
  props: {
    title: {
      type: String,
      default: '添加供应商注册信息'
    }
  },
  data() {
    return {
      drawerVisible: false,
      formData: {
        supplierFullName: '',
        uscCode: '',
        legalRepresentative: '',
        phone: '',
        contactArea: [],
        address: '',
        businessScope: '',
        depositBank: '',
        receivablesAccount: '',
        receivablesPerson: '',
      },
      formRules: {
        supplierFullName: [{ required: true, message: '请输入供应商全称！', trigger: 'change' }],
        uscCode: [{ required: true, message: '请输入统一社会信用代码！', trigger: 'change' }],
        legalRepresentative: [{ required: true, message: '请输入法定代表人！', trigger: 'change' }],
        phone: [{ required: true, message: '请输入联系电话！', trigger: 'change' }],
        contactArea: [{ required: true, message: '请选择联系地区！', trigger: 'change' }],
        address: [{ required: true, message: '请输入地址！', trigger: 'change' }],
        businessScope: [{ required: true, message: '请输入经营范围！', trigger: 'change' }],
        depositBank: [{ required: true, message: '请输入开户行！', trigger: 'change' }],
        receivablesAccount: [{ required: true, message: '请输入收款账号！', trigger: 'change' }],
        receivablesPerson: [{ required: true, message: '请输入收款人！', trigger: 'change' }],
      },
      contactAreaOptions: [
        {
          value: '1',
          label: '北京市',
          children: [
            {
              value: '11',
              label: '东城区',
            },
            {
              value: '12',
              label: '西城区',
            },
            {
              value: '13',
              label: '朝阳区',
            },
          ],
        },
        {
          value: '2',
          label: '广东省',
          children: [
            {
              value: '21',
              label: '广州市',
              children: [
                {
                  value: '211',
                  label: '白云区',
                },
                {
                  value: '212',
                  label: '天河区',
                },
                {
                  value: '213',
                  label: '海珠区',
                },
                {
                  value: '214',
                  label: '越秀区',
                },
              ],
            },
          ],
        },
      ],
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  },
  methods: {
    onDrawerOpen() {
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    onDrawerClose() {
      this.drawerVisible = false;
    },
    
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    onSave() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '操作提醒',
            content: '确定提交评估？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.onDrawerClose();
              this.$message.success(`提交成功`);
              this.$emit('successCallback');
            }
          });
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      });
    },
    onDraft() {
      this.onDrawerClose();
      this.$message.success(`保存成功`);
      this.$emit('successCallback');
    },
  }
}
</script>


<style lang="less" scoped>
.header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 6px 30px;
}
.footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(31, 127, 227, 0.08);
  display: flex;
  justify-content: center;
}
</style>